<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>接诊分析 - 萌迹(Cute Trail Admin)后台管理系统</title>
<link rel="icon" href="petvet.ico" type="image/ico">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        .filters {
            display: flex;
            gap: 15px;
        }
        select, button {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background-color: white;
            cursor: pointer;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .chart-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            gap: 20px;
        }
        .chart-container {
            flex: 1;
            height: 400px;
            min-width: 0;
        }
        .table-container {
            margin-top: 30px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .highlight {
            font-weight: bold;
            color: #3498db;
        }
        .doctor-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }
        .doctor-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e0e0e0;
        }
        .doctor-details {
            flex: 1;
        }
        .doctor-name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .doctor-department {
            color: #666;
            margin-bottom: 5px;
        }
        .doctor-stats {
            display: flex;
            gap: 20px;
        }
        .stat-item {
            text-align: center;
            padding: 0 15px;
        }
        .stat-value {
            font-size: 18px;
            font-weight: bold;
            color: #3498db;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
    </style>

</div>
<body>
    <div class="container">
        <div class="header">
            <div class="title">接诊分析</div>
            <div class="filters">
                <select id="timeRange">
                    <option value="7">最近7天</option>
                    <option value="30" selected>最近30天</option>
                    <option value="90">最近3个月</option>
                    <option value="180">最近6个月</option>
                    <option value="365">最近1年</option>
                </select>
                <select id="department">
                    <option value="all">全部科室</option>
                    <option value="surgery">外科</option>
                    <option value="internal">内科</option>
                    <option value="dermatology">皮肤科</option>
                    <option value="dental">牙科</option>
                    <option value="emergency">急诊</option>
                </select>
                <button id="refresh">刷新数据</button>
                <button id="export">导出报表</button>
            </div>
        </div>

        <!-- 医生信息概览 -->
        <div class="doctor-info">
            <img src="images/doctor.png" alt="医生头像" class="doctor-avatar">
            <div class="doctor-details">
                <div class="doctor-name">权巍医生</div>
                <div class="doctor-department">外科 | 主治医师 | 从业8年</div>
                <div class="doctor-stats">
                    <div class="stat-item">
                        <div class="stat-value">328</div>
                        <div class="stat-label">总接诊量</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">42%</div>
                        <div class="stat-label">复诊率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">4.8</div>
                        <div class="stat-label">平均评分</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">92%</div>
                        <div class="stat-label">好评率</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第一行图表 -->
        <div class="chart-row">
            <div id="visitTypeChart" class="chart-container"></div>
            <div id="departmentDistributionChart" class="chart-container"></div>
        </div>

        <!-- 第二行图表 -->
        <div class="chart-row">
            <div id="revisitRateChart" class="chart-container"></div>
            <div id="timeSlotChart" class="chart-container"></div>
        </div>

        <!-- 详细数据表格 -->
        <div class="table-container">
            <h3>详细接诊记录</h3>
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>时间</th>
                        <th>宠物类型</th>
                        <th>宠物姓名</th>
                        <th>接诊类型</th>
                        <th>诊断结果</th>
                        <th>复诊计划</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2024-10-15</td>
                        <td>09:30</td>
                        <td>犬</td>
                        <td>旺财</td>
                        <td class="highlight">复诊</td>
                        <td>术后恢复检查</td>
                        <td>2周后复查</td>
                    </tr>
                    <tr>
                        <td>2024-10-15</td>
                        <td>11:15</td>
                        <td>猫</td>
                        <td>咪咪</td>
                        <td>初诊</td>
                        <td>皮肤病</td>
                        <td>1周后复诊</td>
                    </tr>
                    <tr>
                        <td>2024-10-14</td>
                        <td>14:00</td>
                        <td>犬</td>
                        <td>豆豆</td>
                        <td class="highlight">复诊</td>
                        <td>疫苗接种</td>
                        <td>1年后疫苗</td>
                    </tr>
                    <tr>
                        <td>2024-10-14</td>
                        <td>16:30</td>
                        <td>兔</td>
                        <td>小白</td>
                        <td>初诊</td>
                        <td>牙齿检查</td>
                        <td>3个月后检查</td>
                    </tr>
                    <tr>
                        <td>2024-10-13</td>
                        <td>10:00</td>
                        <td>猫</td>
                        <td>小黑</td>
                        <td class="highlight">复诊</td>
                        <td>绝育术后检查</td>
                        <td>已完成</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        // 初始化所有图表
        const visitTypeChart = echarts.init(document.getElementById('visitTypeChart'));
        const departmentDistributionChart = echarts.init(document.getElementById('departmentDistributionChart'));
        const revisitRateChart = echarts.init(document.getElementById('revisitRateChart'));
        const timeSlotChart = echarts.init(document.getElementById('timeSlotChart'));

        // 接诊类型饼图配置
        const visitTypeOption = {
            title: {
                text: '接诊类型分布',
                subtext: '初诊 vs 复诊',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['初诊', '复诊']
            },
            series: [
                {
                    name: '接诊类型',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 328, name: '初诊', itemStyle: { color: '#3498db' } },
                        { value: 236, name: '复诊', itemStyle: { color: '#2ecc71' } }
                    ]
                }
            ]
        };

        // 科室分布饼图配置
        const departmentDistributionOption = {
            title: {
                text: '科室接诊分布',
                subtext: '各科室接诊量占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 'right',
                data: ['外科', '内科', '皮肤科', '牙科', '急诊']
            },
            series: [
                {
                    name: '科室分布',
                    type: 'pie',
                    radius: '70%',
                    center: ['40%', '50%'],
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{b}: {c} ({d}%)'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: [
                        { value: 156, name: '外科', itemStyle: { color: '#3498db' } },
                        { value: 128, name: '内科', itemStyle: { color: '#9b59b6' } },
                        { value: 98, name: '皮肤科', itemStyle: { color: '#e74c3c' } },
                        { value: 75, name: '牙科', itemStyle: { color: '#f1c40f' } },
                        { value: 107, name: '急诊', itemStyle: { color: '#1abc9c' } }
                    ]
                }
            ]
        };

        // 复诊率饼图配置
        const revisitRateOption = {
            title: {
                text: '复诊率分析',
                subtext: '各科室复诊率对比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}%'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['外科', '内科', '皮肤科', '牙科', '急诊']
            },
            series: [
                {
                    name: '复诊率',
                    type: 'pie',
                    radius: '60%',
                    center: ['50%', '60%'],
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{b}: {c}%'
                    },
                    data: [
                        { value: 48.7, name: '外科', itemStyle: { color: '#3498db' } },
                        { value: 42.2, name: '内科', itemStyle: { color: '#9b59b6' } },
                        { value: 35.5, name: '皮肤科', itemStyle: { color: '#e74c3c' } },
                        { value: 52.0, name: '牙科', itemStyle: { color: '#f1c40f' } },
                        { value: 28.0, name: '急诊', itemStyle: { color: '#1abc9c' } }
                    ]
                }
            ]
        };

        // 时间段分布饼图配置
        const timeSlotOption = {
            title: {
                text: '接诊时间段分布',
                subtext: '各时间段接诊量占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 'right',
                data: ['上午(8-12)', '下午(12-18)', '晚上(18-22)', '夜间(22-8)']
            },
            series: [
                {
                    name: '时间段分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {c} ({d}%)'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: [
                        { value: 215, name: '上午(8-12)', itemStyle: { color: '#3498db' } },
                        { value: 198, name: '下午(12-18)', itemStyle: { color: '#2ecc71' } },
                        { value: 112, name: '晚上(18-22)', itemStyle: { color: '#e74c3c' } },
                        { value: 39, name: '夜间(22-8)', itemStyle: { color: '#f39c12' } }
                    ]
                }
            ]
        };

        // 应用配置
        visitTypeChart.setOption(visitTypeOption);
        departmentDistributionChart.setOption(departmentDistributionOption);
        revisitRateChart.setOption(revisitRateOption);
        timeSlotChart.setOption(timeSlotOption);

        // 响应式调整
        window.addEventListener('resize', function() {
            visitTypeChart.resize();
            departmentDistributionChart.resize();
            revisitRateChart.resize();
            timeSlotChart.resize();
        });

        // 模拟数据刷新
        document.getElementById('refresh').addEventListener('click', function() {
            // 这里可以添加实际的数据刷新逻辑
            console.log('刷新数据，时间范围:', document.getElementById('timeRange').value, 
                        '科室:', document.getElementById('department').value);
            
            // 模拟数据变化
            const newVisitTypeData = [
                { value: 350 + Math.floor(Math.random() * 30), name: '初诊' },
                { value: 240 + Math.floor(Math.random() * 20), name: '复诊' }
            ];
            
            const newDepartmentData = [
                { value: 160 + Math.floor(Math.random() * 20), name: '外科' },
                { value: 130 + Math.floor(Math.random() * 15), name: '内科' },
                { value: 100 + Math.floor(Math.random() * 15), name: '皮肤科' },
                { value: 80 + Math.floor(Math.random() * 10), name: '牙科' },
                { value: 110 + Math.floor(Math.random() * 15), name: '急诊' }
            ];
            
            const newRevisitRateData = [
                { value: (45 + Math.random() * 8).toFixed(1), name: '外科' },
                { value: (40 + Math.random() * 8).toFixed(1), name: '内科' },
                { value: (35 + Math.random() * 8).toFixed(1), name: '皮肤科' },
                { value: (50 + Math.random() * 8).toFixed(1), name: '牙科' },
                { value: (25 + Math.random() * 8).toFixed(1), name: '急诊' }
            ];
            
            const newTimeSlotData = [
                { value: 220 + Math.floor(Math.random() * 20), name: '上午(8-12)' },
                { value: 200 + Math.floor(Math.random() * 20), name: '下午(12-18)' },
                { value: 115 + Math.floor(Math.random() * 15), name: '晚上(18-22)' },
                { value: 40 + Math.floor(Math.random() * 10), name: '夜间(22-8)' }
            ];
            
            visitTypeOption.series[0].data = newVisitTypeData;
            departmentDistributionOption.series[0].data = newDepartmentData;
            revisitRateOption.series[0].data = newRevisitRateData;
            timeSlotOption.series[0].data = newTimeSlotData;
            
            visitTypeChart.setOption(visitTypeOption);
            departmentDistributionChart.setOption(departmentDistributionOption);
            revisitRateChart.setOption(revisitRateOption);
            timeSlotChart.setOption(timeSlotOption);
            
            // 更新医生概览数据
            const totalVisits = newVisitTypeData[0].value + newVisitTypeData[1].value;
            const revisitRate = ((newVisitTypeData[1].value / totalVisits) * 100).toFixed(0);
            
            document.querySelector('.stat-value:nth-child(1)').textContent = totalVisits;
            document.querySelector('.stat-value:nth-child(2)').textContent = revisitRate + '%';
            document.querySelector('.stat-value:nth-child(3)').textContent = (4.7 + Math.random() * 0.3).toFixed(1);
            document.querySelector('.stat-value:nth-child(4)').textContent = (90 + Math.floor(Math.random() * 5)) + '%';
        });

        // 导出功能
        document.getElementById('export').addEventListener('click', function() {
            // 这里可以添加实际的导出逻辑
            alert('报表导出功能需要连接后端服务实现');
        });
    </script>
</body>
</body>
</html>